// 有个html节点，页面的滚动距离超过了100 就显示，小于100就隐藏
// 节点单击回到顶部
import { useEffect,useRef } from "react";
export function useGoTop(dis=100){
  // 除垢剂一个elem dom引用
  const elem = useRef();

 
  useEffect(()=>{
      // 滚动监听函数
    const onScroll = ()=>{
      //document.documentElement html节点 
      if(document.documentElement.scrollTop<=dis){
        // 隐藏
        elem.current.style.display="none"
      }else{
        // 显示
        elem.current.style.display="block"
      }
    }
    // 组件关注完毕，注册scroll事件
    window.addEventListener("scroll",onScroll);
    // 默认检查一次
    onScroll();
    // 节点监听单击事件，滚动到0的位置，平滑
    elem.current.addEventListener("click",()=>{
      window.scrollTo({
        top:0,
        behavior:"smooth"
      })
    })
    // 如果调用它的组件（App.vue）被卸载
    // 将要执行 removeEventListenter
    return ()=> window.removeEventListener("scroll",onScroll);
  },[dis])
  // 返回这个dom引用
  return elem
}